<template>
  <div>
    <div style="margin-bottom: 15px">
      <el-button size="mini" type="primary" @click="add()">新增接口</el-button>
    </div>
    <add-api-page
      :dialogFormVisible.sync="dialogFormVisible"
      :apiSuiteId.sync="newApiSuiteId"
      v-on:changeAddApiPage="cap()"
    ></add-api-page>
    <div>
      <!-- <el-button size="mini" type="primary" @click="openTc" style="margin-bottom :20px">新增接口</el-button> -->
      <el-table :data="newApiList.data.list" border size="mini">
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="接口名称"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="method"
          label="请求方式"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="path"
          label="接口路径"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="newApiList.data.pageSize"
        :current-page="newApiList.data.pageNamber"
        :total="newApiList.data.total"
        style="float: right; margin-top: 10px; margin-bottom: 10px"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import AddApiPage from "./AddApiPage.vue";
export default {
  components: { AddApiPage },
  created() {
  },
  props: {
    apiList: {
      type: Object,
    },
    apiSuiteId: {
      type: Number,
    },
  },
  watch: {
    apiList: function (value) {
      this.newApiList = value;
    },
    apiSuiteId: function (value) {
      this.newApiSuiteId = value;
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      newApiList: this.apiList,
      newApiSuiteId: this.apiSuiteId,

    };
  },
  methods: {
    add() {
      this.dialogFormVisible = true;
    },
    cap() {
      this.dialogFormVisible = false;
    },
    getApiPage(p) {
      this.$api
        .apiPage(p)
        .then((res) => {
          this.newApiList = res;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getApiPage({ pageNum: 1, pageSize: val, apiSuiteId: this.apiSuiteId })
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.getApiPage({
        pageNum: val,
        pageSize: this.newApiList.data.pageSize,
        apiSuiteId: this.apiSuiteId
      });
    },
    handleEdit(index,value){
      console.log(index,value)
      this.$emit("showDetails",value)
    },
    handleDelete(index) {
      let id = this.newApiList.data.list[index].id;
      this.$api
        .apiDelete({ id: id })
        .then((res) => {
          console.log(res);
          this.getApiPage({
            pageNum: this.newApiList.data.pageNum,
            pageSize: this.newApiList.data.pageSize,
            apiSuiteId: this.apiSuiteId,
          });
        })
        .catch((res) => {
          console.log(res);
        });
    },
  },
};
</script>
